<template>
  <div class="min-h-screen bg-gray-50 p-8">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-3xl font-bold text-gray-900 mb-8">API测试页面</h1>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 用户资料API测试 -->
        <div class="bg-white rounded-lg shadow p-6">
          <h2 class="text-xl font-semibold mb-4">用户资料API测试</h2>
          
          <div class="space-y-4">
            <el-button @click="testGetProfile" :loading="loading.getProfile">
              获取用户资料
            </el-button>
            
            <el-button @click="testUpdateProfile" :loading="loading.updateProfile">
              更新用户资料
            </el-button>
            
            <el-button @click="testUploadAvatar" :loading="loading.uploadAvatar">
              上传头像
            </el-button>
            
            <el-button @click="testChangePassword" :loading="loading.changePassword">
              修改密码
            </el-button>
          </div>
          
          <div v-if="results.profile" class="mt-4 p-4 bg-gray-100 rounded">
            <h3 class="font-medium mb-2">用户资料结果:</h3>
            <pre class="text-sm">{{ JSON.stringify(results.profile, null, 2) }}</pre>
          </div>
        </div>

        <!-- 语音设置API测试 -->
        <div class="bg-white rounded-lg shadow p-6">
          <h2 class="text-xl font-semibold mb-4">语音设置API测试</h2>
          
          <div class="space-y-4">
            <el-button @click="testGetVoiceSettings" :loading="loading.getVoiceSettings">
              获取语音设置
            </el-button>
            
            <el-button @click="testUpdateVoiceSettings" :loading="loading.updateVoiceSettings">
              更新语音设置
            </el-button>
            
            <el-button @click="testResetVoiceSettings" :loading="loading.resetVoiceSettings">
              重置语音设置
            </el-button>
          </div>
          
          <div v-if="results.voiceSettings" class="mt-4 p-4 bg-gray-100 rounded">
            <h3 class="font-medium mb-2">语音设置结果:</h3>
            <pre class="text-sm">{{ JSON.stringify(results.voiceSettings, null, 2) }}</pre>
          </div>
        </div>
      </div>

      <!-- 错误信息显示 -->
      <div v-if="error" class="mt-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
        <h3 class="font-medium">错误信息:</h3>
        <p>{{ error }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
import {
  getUserProfile,
  updateUserProfile,
  uploadUserAvatar,
  updatePassword,
  getVoicePreferences,
  updateVoicePreferences,
  resetVoicePreferences,
  type UserProfileUpdateDTO,
  type PasswordUpdateDTO,
  type VoicePreferencesUpdateDTO
} from '@/api/user'

const authStore = useAuthStore()

// 加载状态
const loading = reactive({
  getProfile: false,
  updateProfile: false,
  uploadAvatar: false,
  changePassword: false,
  getVoiceSettings: false,
  updateVoiceSettings: false,
  resetVoiceSettings: false
})

// 测试结果
const results = reactive({
  profile: null as any,
  voiceSettings: null as any
})

// 错误信息
const error = ref('')

/**
 * 测试获取用户资料
 */
const testGetProfile = async () => {
  try {
    loading.getProfile = true
    error.value = ''
    
    const response = await getUserProfile()
    results.profile = response.data
    ElMessage.success('获取用户资料成功')
  } catch (err: any) {
    error.value = err.message || '获取用户资料失败'
    ElMessage.error('获取用户资料失败')
  } finally {
    loading.getProfile = false
  }
}

/**
 * 测试更新用户资料
 */
const testUpdateProfile = async () => {
  try {
    loading.updateProfile = true
    error.value = ''
    
    const updateData: UserProfileUpdateDTO = {
      username: 'test_user_' + Date.now(),
      age: 25,
      gender: 1
    }
    
    const response = await updateUserProfile(updateData)
    results.profile = response.data
    ElMessage.success('更新用户资料成功')
  } catch (err: any) {
    error.value = err.message || '更新用户资料失败'
    ElMessage.error('更新用户资料失败')
  } finally {
    loading.updateProfile = false
  }
}

/**
 * 测试上传头像
 */
const testUploadAvatar = async () => {
  try {
    loading.uploadAvatar = true
    error.value = ''
    
    // 创建一个测试图片文件
    const canvas = document.createElement('canvas')
    canvas.width = 100
    canvas.height = 100
    const ctx = canvas.getContext('2d')!
    ctx.fillStyle = '#3b82f6'
    ctx.fillRect(0, 0, 100, 100)
    ctx.fillStyle = 'white'
    ctx.font = '20px Arial'
    ctx.fillText('Test', 30, 50)
    
    canvas.toBlob(async (blob) => {
      if (blob) {
        const file = new File([blob], 'test-avatar.png', { type: 'image/png' })
        const response = await uploadUserAvatar(file)
        results.profile = { ...results.profile, avatarUrl: response.data.avatarUrl }
        ElMessage.success('上传头像成功')
      }
    }, 'image/png')
  } catch (err: any) {
    error.value = err.message || '上传头像失败'
    ElMessage.error('上传头像失败')
  } finally {
    loading.uploadAvatar = false
  }
}

/**
 * 测试修改密码
 */
const testChangePassword = async () => {
  try {
    loading.changePassword = true
    error.value = ''
    
    const passwordData: PasswordUpdateDTO = {
      oldPassword: 'oldPassword123',
      newPassword: 'newPassword456',
      confirmPassword: 'newPassword456'
    }
    
    await updatePassword(passwordData)
    ElMessage.success('修改密码成功')
  } catch (err: any) {
    error.value = err.message || '修改密码失败'
    ElMessage.error('修改密码失败')
  } finally {
    loading.changePassword = false
  }
}

/**
 * 测试获取语音设置
 */
const testGetVoiceSettings = async () => {
  try {
    loading.getVoiceSettings = true
    error.value = ''
    
    const response = await getVoicePreferences(parseInt(authStore.userInfo?.id || '1'))
    results.voiceSettings = response.data
    ElMessage.success('获取语音设置成功')
  } catch (err: any) {
    error.value = err.message || '获取语音设置失败'
    ElMessage.error('获取语音设置失败')
  } finally {
    loading.getVoiceSettings = false
  }
}

/**
 * 测试更新语音设置
 */
const testUpdateVoiceSettings = async () => {
  try {
    loading.updateVoiceSettings = true
    error.value = ''
    
    const voiceData: VoicePreferencesUpdateDTO = {
      voiceSpeed: 1.2,
      voicePitch: 0.9,
      voiceTone: 'male',
      voiceLanguage: 'Chinese',
      autoEmotionDetection: false,
      privacyLevel: 2
    }
    
    const response = await updateVoicePreferences(parseInt(authStore.userInfo?.id || '1'), voiceData)
    results.voiceSettings = response.data
    ElMessage.success('更新语音设置成功')
  } catch (err: any) {
    error.value = err.message || '更新语音设置失败'
    ElMessage.error('更新语音设置失败')
  } finally {
    loading.updateVoiceSettings = false
  }
}

/**
 * 测试重置语音设置
 */
const testResetVoiceSettings = async () => {
  try {
    loading.resetVoiceSettings = true
    error.value = ''
    
    const response = await resetVoicePreferences(parseInt(authStore.userInfo?.id || '1'))
    results.voiceSettings = response.data
    ElMessage.success('重置语音设置成功')
  } catch (err: any) {
    error.value = err.message || '重置语音设置失败'
    ElMessage.error('重置语音设置失败')
  } finally {
    loading.resetVoiceSettings = false
  }
}
</script>

<style scoped>
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
